<template>
  <div>
    <!-- //触发事件按钮 -->
<el-button type="text" style="height:15px;color:black;font-size: 21px"  @click="open(pdfUrl)">预览PDF</el-button>

<!-- //对话框 -->
<el-dialog
        title="预览在线地址"
        :visible.sync="dialogVisible"
        top="50px"
        center="true"
        width="670px">
    <iframe style="width: 620px;height: 500px;margin-top: 10px;margin-top: -10px;" :src="url"></iframe>
</el-dialog>

    <pdf
      v-for="i in numPages"
      :key="i"
      :src="loadingTask"
      :page="i"
      style="display: inline-block; width: 100%"
    ></pdf>
  </div>
</template>

<script>
// import pdf from "vue-pdf";
import pdf from '@teckel/vue-pdf'

export default {
  data() {
    return {
      dialogVisible: false,
      url: '',
      loadingTask: null,
      numPages: undefined,
      // pdfUrl: "https://source.xsycps.com/test/testpdf.pdf",
      // pdfUrl: "https://source.xsycps.com/test/zhenpiaotest.pdf",
      // pdfUrl: "http://test34y983711.oss-cn-hangzhou.aliyuncs.com/2023/05/16/265219f21297422fbb74c75ed64668ba011002100511_69464212.pdf",
      // pdfUrl: "https://xsy-book.oss-cn-qingdao.aliyuncs.com/yc/chapter/61b6929dc881f5dcdb760a6fb4b6ab67.pdf",
      pdfUrl: "http://source.sanwugeng.com/yc/chapter/61b6929dc881f5dcdb760a6fb4b6ab67.pdf",
      // pdfUrl: "https://xsy-open-source.oss-cn-beijing.aliyuncs.com/test/testpdf.pdf",
      // pdfUrl: "https://train.lovetime.top/test/a94352ef6bf84031b41e1a944b4703ee测试文稿1.pdf",
    };
  },
  components: {
    pdf,
  },
  mounted() {
    this.loadingTask = pdf.createLoadingTask(this.pdfUrl);
    this.$nextTick(() => {
      this.loadingTask.promise
        .then((pdf) => {
          console.log(pdf);
          this.numPages = pdf.numPages;
          console.log("this.numPages:", this.numPages);
        })
        .catch((err) => {
          console.log(err);
        });
    });
  },
  methods: {
    open(url) {
      this.url = url;
      this.dialogVisible = true
    }
  }
};
</script>

<style lang="scss" scoped></style>
